<template>
	<div>
		<ol ref="title"  class="top">
			<li class="active">1</li>
			<li >2</li>
			
		</ol>	

		<div  class="wrap" @touchstart="swipeStart" @touchend="swipeEnd">
			<ol class="bottom" ref="con">
				<li>1里面的内容</li>
				<li>2里面的内容</li>
			</ol>
		</div>
		

	</div>
</template>
<script >
	export default{
		data(){
			//console.log(this)
			return {
				touch:'',
				active:"active"
			}
		},
		methods:{
			swipeStart(e){
				//console.log(e)
				this.touch = e.changedTouches[0].clientX
			},
			swipeEnd(e){
				//console.log(e)
				//console.log(this.$refs)
				if(e.changedTouches[0].clientX - this.touch > 0){
					//console.log("右划")
					this.$refs.con.style.left = '0px'
					this.$refs.title.children[1].className =""
					this.$refs.title.children[0].className = "active"

				}else{
					//console.log("左划")
					this.$refs.con.style.left = '-389px'
					this.$refs.title.children[0].className = ""
					this.$refs.title.children[1].className = "active"
					//console.log(this.$refs.con.left)
				}
			}
		}
	}
</script>

<style scoped>
	ol{
		list-style: none;
		margin: 0
	}

	.top{
		height: 50px;
		background-color: red;
	}
	.top li{
		width: 33%;
		border: 1px solid green;
		float: left;
	}
	.active {
		background-color: pink;
	}
	
	.wrap{
		width: 100%;
		height: 300px;
		overflow: hidden;
		position: relative;
	}

	.bottom{
		height: 300px;
		width: 300%;
		background-color: green;
		position: absolute;
		left: 0;
	}

	.bottom li{
		width: 33%;
		float: left;
	}
	
</style>